<template>
	<!-- 创建笔记 -->
	<view class="cs-detl-x">
		<view class="cs-detl">
			<view class="cs-detl-tc">
				<input class="tc-input" type="text" v-model="noteTitle" placeholder="请输入标题" placeholder-style="color:#C2C2C2"/>
			</view>
			<view class="cs-detl-editor-x">
				<view class='toolbar' @tap="format">
					<view>
						<view :class="formats.backgroundColor === '#00ff00' ? 'ql-active' : ''" class="iconfont iconziti icon_caozuo"
						 data-name="backgroundColor" data-value="#00ff00"></view>
					</view>
					<view><view class="iconfont iconduigou1 icon_caozuo" data-name="list" data-value="check"></view></view>
					<view><view class="iconfont iconshangyibu icon_caozuo" @tap="undo"></view></view>
					<view><view class="iconfont iconxiayibu icon_caozuo" @tap="redo"></view></view>
					<!-- 插入图片 -->
					<view><view class="iconfont icontupian icon_caozuo" @tap="insertImage"></view></view>
					<!-- 手/笔 -->
					<view><view class="iconfont iconshouxieqianpi icon_caozuo" @tap="clickOpen"></view></view>
				</view>
				<editor id="editor" class="ql-container"  placeholder="开始输入..." showImgSize showImgToolbar showImgResize
				 @statuschange="onStatusChange" @ready="onEditorReady">
				</editor>
			</view>
			<!-- 手/笔 和草稿 -->
			<v-open v-if='isOpen' @changeOpen='changeOpen' :is_top='false'></v-open>
			<v-draw v-if='isDraw' @clickDraw='clickDraw'></v-draw>
		</view>
	</view> 
</template>

<script>
	import open from '@/components/note/Base-open';
	import draw from '@/components/note/Base-draw';
	export default {
		components: {
			vOpen: open,
			vDraw: draw
		},
		data() {
			return {
				noteTitle: '', // 笔记标题
				iconArr: [ // 图标数组
					{icon: 'iconziti',title: '字体'},
					{icon: 'iconduigou1',title: '对勾'},
					{icon: 'icontupian',title: '图片'},
					{icon: 'iconshouxieqianpi',title: '手写签批'},
				],
				stuId: uni.getStorageSync('userInfo').id, //个人ID
				
				formats: {}, // 富文本样式对象
				isOpen: false, // 手/笔开关
				isDraw: false, // 画布开关
				
				isUtil: false, // 切换修改和保存的状态
				folderId: '', //文件夹ID
			}
		},
		// 点击完成
		onNavigationBarButtonTap() {
			if (this.noteTitle.trim().length <= 0) return uni.showToast({title: '请输入标题', icon: 'none'})
			// 获取富文本，并开始添加笔记
			var _this = this;
			this.editorCtx.getContents({
				success: function(res) {
					var content = res.html.replace(/&lt;/g, '<').replace(/&gt;/g, '>');
					let obj = {
						usr_id: _this.stuId,
						notes_title: _this.noteTitle,
						notes_content: content,
						notes_type: 4
					}
					if(_this.folderId) {
						obj.folder_id = _this.folderId;
					}
					_this.$kbapi.apiPost('mobile/notes/save', obj).then(res => {
						if (res.data.code == 200) {
							uni.showToast({title: '添加成功'})
							// 1秒后进行后退
							setTimeout(() => {
								uni.navigateBack()
							}, 1000)
						} else {
							uni.showToast({title: res.data.message, icon: 'none'})
						}
					})
				}
			});
		},
		// 离开时清空画布缓存
		onBackPress() {
			uni.removeStorageSync('imgbase')
		},
		onLoad(e) {
			if(e.folderId) {
				this.folderId = e.folderId;
			}
		},
		methods: {
			// 初始化富文本
			onEditorReady() {
				uni.createSelectorQuery().select('#editor').context((res) => {
					this.editorCtx = res.context
				}).exec()
			},
			// 撤销
			undo() {
				this.editorCtx.undo()
			},
			// 恢复
			redo() {
				this.editorCtx.redo()
			},
			// 修改样式
			format(e) {
				let {
					name,
					value
				} = e.target.dataset
				if (!name) return
				this.editorCtx.format(name, value)
			},
			// 监听富文本
			onStatusChange(e) {
				const formats = e.detail
				this.formats = formats
			},
			// 清除当前所选
			removeFormat() {
				this.editorCtx.removeFormat()
			},
			// 选择图片
			insertImage() {
				uni.chooseImage({
					count: 1,
					success: res => {
						// 1. 将用户选择的图片上传到服务器，然后再根据服务器返回的真正地址地址插入到富文本中
						this.$uapi.apifile('api/v1/upload', {file: res.tempFilePaths[0]}).then(res => {
							// 开始插入图片
							var result = JSON.parse(res.data);
							if(result.code == 200) {
								this.editorCtx.insertImage({
									src: JSON.parse(res.data).data.fileUrl,
									alt: '图像'
								})
							} else {
								uni.showToast({
									title: '上传失败',
									icon: 'none'
								})
							}
						})
					}
				})
			},
			// 启动/隐藏手/笔
			clickOpen() {
				this.isOpen = !this.isOpen
			},
			// 手笔选择事件
			changeOpen(title) {
				if (title === 'hand') { // 点击了手
					this.isDraw = true // 启动画布
					this.isOpen = false // 关闭手笔两个按钮
				}
				if (title === 'pen') { // 点击了笔
					uni.showToast({title: '暂未开通~', icon: 'none'})
				}
			},
			// 画布点击事件
			clickDraw(title) {
				if (title === 'save') {
					var img = uni.getStorageSync('imgbase');
					// 保存后开始插入图片，并且隐藏画布
					this.isDraw = false
					this.editorCtx.insertImage({
						src: uni.getStorageSync('imgbase'),
						alt: '图像',
						success: function() {
							uni.removeStorageSync('imgbase')
						} 
					})
				} else if (title === 'close') {
					this.isDraw = false
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #FAFAFA;
	}
	// 输入标题
	.cs-detl-tc{
		padding: 20upx 30upx;
		background: #FFFFFF;
	}
	.tc-input{
		font-size: 34upx;
		color: #333333;
	}
	
	// 富文本
	.cs-detl-editor-x{
		padding-bottom: 100upx;
	}
	.toolbar{
		display: flex;
		position: fixed;
		bottom: 0;left: 0;right: 0;
		justify-content: space-around;
		z-index: 1;
		text-align: center;
		font-size: 32upx;
		color: #666666;
		box-shadow:0px -2px 4px rgba(0,0,0,0.16);
		background: #FFFFFF;
	}
	.ql-container{
		box-sizing: border-box;
		width: 100%;
		min-height: 50vh;
		height: auto;
		padding: 0 20upx 200upx;
		& img {
			max-width: 80%;
			height: auto;
		}
	}
	// 图标
	.icon_caozuo{
		color: #000000;
		font-size: 50upx;
	}
</style>
